g
<template>
  <div class="home">
    <el-container class="home-container">
      <el-header height="50px">
        <!-- 头部 logo -->
        <div class="logo-box">
          <img src="../assets/img/logo.png" />
        </div>
        <!-- 头部 导航栏 -->
        <div>
          <el-menu class="main-menu" mode="horizontal" default-active="/goods" background-color="#595E6C" text-color="#ffffff" active-text-color="#ffffff" :router="true">
            <el-menu-item class="main-menu-item" :index="item.path" v-for="(item, index) in topNav" :key="index">{{ item.value }}</el-menu-item>
          </el-menu>
        </div>
        <!-- 头部 按钮 -->
        <div class="header-box-btn">
          <div class="self-btn" v-popover:userInfoPop>
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="home-btn" v-popover:backHomePop>
            <i class="el-icon-s-home"></i>
          </div>
          <div class="more-btn" v-popover:commonlyUsedPop>
            <i class="el-icon-menu"></i>
          </div>
          <div class="msg-btn" v-popover:homeMsgPop>
            <i class="el-icon-message-solid"></i>
          </div>
          <div class="logout-btn" @click="logout()">
            <i class="el-icon-switch-button"></i>
          </div>
        </div>
      </el-header>
      <el-container class="main-box">
        <!-- 次级导航(侧导航栏) -->
        <el-aside width="180px" class="left">
          <el-menu class="minor-menu" unique-opened>
            <el-submenu index="1">
              <template slot="title">
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <span>商品配置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 页面主体部分 -->
        <el-main class="right">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- 头像弹出框 -->
    <el-popover ref="userInfoPop" width="300" trigger="hover">
      <template slot="">
        <div class="user-info-pop-box">
          <div class="user-info-pop-title">
            <div>账户信息</div>
            <div>
              <a href="JavaScript:;">账户设置</a>
            </div>
          </div>
          <div class="user-info-pop-desc">
            <ul>
              <li>状态: 登录</li>
            </ul>
          </div>
        </div>
      </template>
    </el-popover>
    <!-- 返回首页弹出框 -->
    <el-popover ref="backHomePop" width="60" trigger="hover">
      <template slot="">
        <div :style="{ 'text-align': 'center' }">返回首页</div>
      </template>
    </el-popover>
    <!-- 常用菜单弹出框 -->
    <el-popover ref="commonlyUsedPop" width="300" trigger="hover">
      <template slot="">
        <el-row>
          <el-col :span="8" class="commonly-used-menu">常用菜单1 </el-col>
          <el-col :span="8" class="commonly-used-menu">常用菜单1 </el-col>
          <el-col :span="8" class="commonly-used-menu">常用菜单1 </el-col>
        </el-row>
      </template>
    </el-popover>
    <!-- 提示信息弹出框 -->
    <el-popover ref="homeMsgPop" width="300" trigger="hover">
      <template slot="">
        <div class="msg-pop-box">
          <div>订单提示</div>
          <div>广告位提示</div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topNav: [
        { value: '首页', path: '/index' },
        { value: '商品', path: '/goods' },
        { value: '订单', path: '/order' },
        { value: '库存', path: '/storage' },
        { value: '用户', path: '/user' },
        { value: '运营', path: '/operation' },
        { value: '统计', path: '/chart' },
        { value: '财务', path: '/finance' },
        { value: '设置', path: '/set' }
      ]
    }
  },
  methods: {
    /* 退出登录 */
    logout() {
      window.sessionStorage.clear('token')
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scope>
.home {
  width: 100%;
  height: 100%;
  .home-container {
    height: 100%;
  }
}
.el-main {
  padding: 0 !important;
}
.el-header {
  padding: 0;
  height: 100%;
  background-color: #595e6c;
  > div {
    float: left;
  }
  .logo-box {
    min-width: 180px;
    height: 100%;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      height: 30px;
      width: 74px;
    }
  }
  .main-menu {
    border: none;
    height: 50px;
    .main-menu-item {
      line-height: 50px !important;
      height: 50px;
    }
  }
  .header-box-btn {
    box-sizing: border-box;
    float: right;
    width: 304px;
    border-radius: 6px;
    margin: 14px 0;
    > div {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 0 0 0;
      min-width: 36px;
      width: 60px;
      height: 22px;
      color: #fff;
      font-size: 22px;
      border-left: #474b57 solid 1px;
    }
    > :nth-child(1) {
      border: none;
    }
  }
}
.main-box {
  height: 100%;
  .left {
    background-color: #eaedf1;
  }
}
.user-info-pop-box {
  .user-info-pop-title {
    height: 36px;
    > :nth-child(1) {
      float: left;
    }
    > :nth-child(2) {
      float: right;
    }
  }
  .user-info-pop-desc {
    padding: 0 12px;
  }
  .right {
    padding: 0;
    background-color: #f9f9f9;
  }
}
.msg-pop-box {
  > div {
    height: 36px;
    line-height: 36px;
  }
}
.minor-menu {
  background-color: #eaedf1;
  .el-submenu .el-menu-item {
    min-width: 180px;
  }
}
.commonly-used-menu {
  text-align: center;
}
</style>
